<template>
  <div>
    <div class="layout"></div>
    <!-- 支付图片 -->
    <div class="pay-img-box">
      <img class="width-per-100" :src="payImgUrl" alt="" v-if="payImgUrl">
    </div>
    <!-- 底部按钮 -->
    <div class="bottom-btn flex flex-between  pad-t-13 pad-b-13 pad-l-12 pad-r-12">
      <div class="flex flex-item">
        <div class="flex-col mar-l-20" @click="chooseImg(['album'])">
          <img class="width-20 height-20" src="../../../../../static/icons/test-img.png" alt="">
          <span class="font-12 fong-color-3 mar-t-3">相册</span>
        </div>
        <div class="flex-col mar-l-30" @click="chooseImg(['camera'])">
          <img class="width-20 height-20" src="../../../../../static/icons/test-camera.png" alt="">
          <span class="font-12 fong-color-3 mar-t-3">拍摄</span>
        </div>
      </div>
      <div class="flex-item">
        <div class="submit-btn font-19" @click="submitEvent">
          确认提交
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {submitOrderOfflinePaymentApply} from '@/api/shop'
import { listEnterpriseMessageConfig } from '@/api/common'
export default {
  data() {
    return {
      payImgUrl: '',
      orderId: '',
      messageIds: []
    }
  },
  onShow() {
    this.messageConfig()
  },
  mounted() {
    this.chooseImg()
    this.orderId = this.getCurrentPage().query.orderId
  },
  methods: {
    messageConfig() {
      this.messageIds = []
      const dataArr = ['2205']
      let dataStr = dataArr.toString()
      listEnterpriseMessageConfig({
        memberId: this.getCustomerId,
        ascriptionTypes: dataStr
      }).then((response) => {
        if (response.isError) return
        response.data.forEach(item => {
          if (item.miniMadeId) {
            this.messageIds.push(item.miniMadeId)
          }
        })
      }).catch(() => {
      })
    },
    // 选图片
    chooseImg(sourceType = ['album', 'camera']) {
      const THAT = this
      THAT.$pt.showLoading()
      THAT.$pt.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: [...sourceType], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          THAT.payImgUrl = res.tempFilePaths[0]
          THAT.$pt.hideLoading()
        },
        fail: () => {
          THAT.$pt.hideLoading()
        }
      })
    },
    // 上传图片
    doUpload() {
      const that = this
      // 使用微信上传（只能单张上传）
      const uploadTask = that.$pt.uploadFile({
        url: process.env.BASE_API + '/common/uploadFiles',
        // url: 'https://veekray-1.joinsun.vip/api' + '/common/uploadFiles',
        filePath: that.payImgUrl,
        name: 'files',
        success(res) {
          const result = JSON.parse(res.data)
          if (result.code === 101) {
            that.payImgUrl = result.data[0]
            that.submitOrderOfflinePaymentApply()
          } else {
            that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
          }
        },
        fail(err) {
          console.log(err)
          that.$utils.showToast({title: '图片上传发生错误'})
        },
        complete() {
        }
      })
      uploadTask.onProgressUpdate((res) => {
        console.log('上传进度', res.progress)
      })
    },
    submitOrderOfflinePaymentApply() {
      let params = {
        enterpriseId: this.getEnterpriseId,
        orderId: this.orderId,
        applySource: 1,
        proofPaymentImage: this.payImgUrl
      }
      submitOrderOfflinePaymentApply(params).then(res => {
        console.log(res)
        this.$pt.reLaunch({url: `/pages/shop/counter/offline-payments/main?orderId=${this.orderId}`})
      }).catch(err => {
        console.log(err)
      })
    },
    submitEvent() {
      let this_ = this
      let rejectArr = []
      if (!this_.messageIds.length) {
        this_.$utils.showToast({title: '尚未配置消息通知！'})
        return
      }
      this_.$pt.requestSubscribeMessage({
        tmplIds: this_.messageIds,
        success: function(res) {
          // 成功
          Object.keys(res).forEach(key => {
            if (res[key] === 'reject') {
              rejectArr.push(key)
            }
          })
          if (rejectArr.length) {
            this_.messageIds = rejectArr
            this_.$utils.showToast({title: '请允许消息通知！'})
          } else {
            this_.doUpload()
          }
        },
        fail(err) {
          // 失败
          console.error(err)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .layout {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .pay-img-box {
    position: absolute;
    top: 10px;
    z-index: 2;
    width: 100%;
    img {
      height: 509px;
    }
  }
  .bottom-btn {
    width: 375px;
    height: 72px;
    background: #FFFFFF;
    border: 1px solid #F1F1F1;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 2;
  }
  .submit-btn {
    width: 211px;
    height: 45px;
    background: #FF4E23;
    border-radius: 23px;
    color: #fff;
    text-align: center;
    line-height: 45px;
  }
</style>